<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { RouterView } from 'vue-router'
import { NMessageProvider, NConfigProvider, NNotificationProvider, NDialogProvider, NLoadingBarProvider } from 'naive-ui'
import Message from './components/message/index.vue'
import { useConfigStore } from '@/stores/configStore'

const configStore = useConfigStore()

const themeOverrides = computed(() => {
  if (configStore.getThemeColor() === "") {
    return null
  }
  return {
    common: {
      primaryColor: configStore.getThemeColor(),
      primaryColorHover: configStore.getThemeColor(),
    },
  }
})

onMounted(() => {
  configStore.loadConfig()
})

</script>

<template>
  <n-config-provider :theme="configStore.getTheme()" :theme-overrides="themeOverrides" :locale="configStore.getLocale()"
    :date-locale="configStore.getDateLocale()">
    <n-loading-bar-provider>
      <n-dialog-provider>
        <n-message-provider>
          <n-notification-provider>
            <router-view />
            <message />
          </n-notification-provider>
        </n-message-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<style scoped>

</style>
